<template>
    <div class="table">
        <div class="topBtn"> 
          <span>配置礼品包</span>
          <el-button type="primary" size="small" @click="openSelectShop">添加商品</el-button>
        </div>
        <el-table
        :data="conditionListTable"
        border
        style="width: 100%">
            <el-table-column
                prop="good_id"
                label="序号"
                width="60">
            </el-table-column>
            <el-table-column
                prop="name"
                label="商品名称">
            </el-table-column>
            <el-table-column
                prop="code"
                label="商品主图">
                <template slot-scope="scope">
                    <el-image
                        v-if="scope.row.img" 
                        style="width: 80px; height: 80px;"
                        :src="scope.row.img" 
                        :preview-src-list="[scope.row.img]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                prop="code"
                label="商品编号">
            </el-table-column>
            <el-table-column
                prop="sub_name"
                label="副标题">
            </el-table-column>
            <el-table-column
                prop="type"
                label="商品类型">
                <template slot-scope="scope">
                    <p>{{scope.row.type=='0'?'礼包':scope.row.type=='1'?'实物':''}}</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="remark"
                label="说明">
                <template slot-scope="scope">
                    <div class="htmlBox" v-html="scope.row.remark"></div>
                </template>
            </el-table-column>
            <el-table-column
                prop="price"
                label="价格">
            </el-table-column>
            <el-table-column
                prop="stock"
                label="库存">
            </el-table-column>
            <el-table-column
                prop="limit"
                label="限购份数">
                <template slot-scope="scope">
                  <div>{{scope.row.limit==0?'不限购':scope.row.limit}}</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="cash_back"
                label="返现金额">
                <template slot-scope="scope">
                  <div>{{scope.row.cash_back==0?scope.row.price:scope.row.cash_back}}</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="cash_channel"
                label="返现渠道">
                <template slot-scope="scope">
                  <div>{{scope.row.cash_channel==0?'线下':scope.row.cash_channel==1?'系统自动':''}}</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="sell_channel"
                label="售卖渠道">
                <template slot-scope="scope">
                  <div>{{scope.row.sell_channel==0?'线下':scope.row.sell_channel==1?'线上':''}}</div>
                </template>
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <!-- <el-button type="primary" size="mini" @click="editCondition(scope.row)">编辑</el-button> -->
                    <el-button type="danger" size="mini" @click="delCondition(scope.row.good_id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
        
        <!-- 添加条件弹框 -->
        <el-dialog title="添加关联商品" @closed="closedFn" width="40%" :visible.sync="dialogVisible">
            <div class="openBox">
                <div>
                  <div style="margin-bottom:20px;">限购份数 ：<el-input style="width:50%;" type="number" v-model="limit" placeholder="请输入限购份数"></el-input>数量/每人（0为不限购）</div>
                  <div style="margin-bottom:20px;">返现金额 ：<el-input style="width:50%;" type="number" v-model="cash_back" placeholder="请输入返现金额"></el-input></div>
                  <div style="margin-bottom:20px;">
                      返现渠道 ：
                      <el-radio v-model="cash_channel" label="0">线下</el-radio>
                      <el-radio v-model="cash_channel" label="1">系统自动</el-radio>
                  </div>
                  <div style="margin-bottom:20px;">
                      售卖渠道 ：
                      <el-radio v-model="sell_channel" label="0">线下</el-radio>
                      <el-radio v-model="sell_channel" label="1">线上</el-radio>
                  </div>
                  <div style="display:flex;justify-content: flex-end;margin-bottom:5px;">
                    <el-input v-model="searchShop" placeholder="请输入商品名称" clearable @input="clearShopFn"></el-input>
                    <el-button type="primary" size="small" @click="searchShopFn">搜索</el-button>
                  </div>
                  <el-table
                    border
                    :data="goodsList"
                    style="width: 100%;margin:20px 0;">
                    <el-table-column
                      align="center"
                      width="50">
                      <template slot-scope="scope">
                        <el-radio v-model="shopId" :label="scope.row.id">{{''}}</el-radio>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="date"
                      align="center"
                      label="商品主图"
                      width="80">
                      <template slot-scope="scope">
                        <img style="width:30px;height:30px;" :src="scope.row.img" alt="">
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      align="center"
                      label="商品名称"
                      width="auto">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      align="center"
                      label="商品价格"
                      width="auto">
                    </el-table-column>
                    <el-table-column
                      prop="stock"
                      align="center"
                      label="库存"
                      width="auto">
                    </el-table-column>
                  </el-table>
                  <el-pagination
                    @size-change="handleSizeChangeShop"
                    @current-change="handleCurrentChangeShop"
                    :current-page="selectPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="selectPagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="selectTotal"
                    background>
                  </el-pagination>
                </div>
                <!-- <el-radio-group v-model="shopId" v-infinite-scroll="loadShop">
                    <el-radio :label="item.id" v-for="(item,index) in goodsList" :key="index">{{item.name}}</el-radio>
                </el-radio-group> -->
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="selectShop">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props:{
        activityId:{
            type:Number,
            default:''
        }
    },
    data(){
        return{
            page:1,
            pagesize:10,
            total:0,
            conditionListTable:[],
            conditionList:[],

            dialogVisible:false,

            selectPage:1,
            selectPagesize:5,
            selectTotal:0,
            goodsList:[],
            // selectShopArr:[],//选择的商品
            searchShop:'',
            shopId:'',
            cash_back:'',
            limit:5,//限购份数
            cash_channel:'0',//返现渠道 0-线下，1-系统自动
            sell_channel:'1',//售卖渠道 0 线下 1线上 
        }
    },
    watch:{

    },
    methods: {
        // 获取已关联商品列表
        getShopList(){
            let params = {
                activity_id:this.activityId,
                page:this.page,
                pagesize:this.pagesize
            }
            this.$http.post('/api/root/activity/goodrel/lists',params).then(res=>{
                console.log(res,'已关联商品列表');
                if(res.code==1){
                    this.conditionListTable = res.data.data?res.data.data:[];
                    this.total = res.data.count
                }
            })
        },

        // 打开选择商品对话框
        openSelectShop(){
            this.dialogVisible = true
            this.getShopOkList()
        },

        // 对话框确定
        selectShop(){
            // let arr = []
            // this.selectShopArr.map(item=>{
            //     arr.push(item.id)
            // })
            if(this.limit==''){
              this.$message.warning('请输入限购份数')
              return
            }
            if(this.limit*1>255 || this.limit*1<0){
              this.$message.warning('限购份数范围为0-255 / 0为不限购')
              return
            }
            if(!this.shopId){
                this.$message.warning('请选择商品')
                return
            }
            if(this.cash_back==''){
              this.$message.warning('请输入返现金额')
              return
            }
            if(this.cash_back*1<0){
              this.$message.warning('返现金额必须大于等于0')
              return
            }
            console.log(this.activityId,'0-----');
            let params = {
                activity_id:this.activityId,
                good_id:this.shopId,
                cash_back:this.cash_back,
                limit:this.limit,
                cash_channel:this.cash_channel,
                sell_channel:this.sell_channel
            }
            this.$http.post('/api/root/activity/goodrel/add',params).then(res=>{
                console.log(res,'添加关联商品');
                if(res.code==1){
                    this.dialogVisible = false
                    this.$message.success('添加成功')
                    this.getShopList()
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },


        // 获取可关联商品列表
        getShopOkList(){
            let params = {
                keyword:this.searchShop,
                page:this.selectPage,
                pagesize:this.selectPagesize
            }
            this.$http.post('/api/root/activity/good/lists',params).then(res=>{
                console.log(res,'商品列表');
                if(res.code==1){
                    this.goodsList = res.data.data?res.data.data:[];
                    this.selectTotal = res.data.count
                }
            })
        },
        // 搜索可关联商品
        searchShopFn(){
            this.selectPage = 1
            this.selectPagesize = 5
            this.getShopOkList()
        },
        // 清除搜索
        clearShopFn(){
            if(this.searchShop==''){
                this.selectPage = 1
                this.selectPagesize = 5
                this.getShopOkList()
            }
        },

        // 关闭对话框
        closedFn(){
            this.selectPage = 1;
            this.selectPagesize = 5;
            this.searchShop = '';
            this.shopId = '';
            this.cash_back = '';
            this.cash_channel = '0';
            // this.selectShopArr = []
        },

        // 全选
        // handleSelectionChange(val){
        //     console.log(val,'选择的商品');
        //     this.selectShopArr = val
        // },

        // 删除关联商品
        delCondition(good_id){
            this.$confirm('此操作将删除该关联商品, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(()=>{
                let params = {
                    activity_id:this.activityId,
                    good_id
                }
              this.$http.post('/api/root/activity/goodrel/del',params).then(res=>{
                console.log(res);
                if(res.code==1){
                  this.$message({
                    type:'success',
                    message:'删除成功'
                  })
                  this.getShopList()
                }else{
                  this.$message.warning(res.msg)
                }
              })
            })
        },



        handleSizeChange(val){
            this.page = 1;
            this.pagesize = val
            this.getShopList()
        },
        handleCurrentChange(val){
            this.page = val
            this.getShopList()
        },
        
        handleSizeChangeShop(val){
            this.selectPage = 1
            this.selectPagesize = val
            this.getShopOkList()
        },
        handleCurrentChangeShop(val){
            this.selectPage = val
            this.getShopOkList()
        },
    },
}
</script>

<style lang="less">
.table{
    padding-bottom: 20px;
    .block{
        display: flex;
        justify-content: flex-end;
        padding-top: 20px;
    }
}
.topBtn{
    display:flex;
    align-items:center;
    margin-bottom:15px;
    span{
        font-weight:600;
        margin-right:10px;
    }
}

.conditionBox{
  .item{
    display: flex;
    align-items: center;
    margin-top: 15px;
    .tit{
      width: 70px;
      text-align: right;
    }
    .el-input{
      width: 30%;
      margin-right: 10px;
    }
  }
}

.openBox{
  .el-radio-group{
    display:flex;
    flex-direction: column;
    overflow:auto;
    height:200px;
    .el-radio{
      margin: 10px 0;
    }
  }
}

.htmlBox{
    img{
        max-width: 100px;
        max-height: 200px;
    }
}

</style>

